<template>
  <div class="shishi-container">
    <div class="shishi-top-text bordered">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <div class="text">
        <div class="l">企业数</div>
        <div class="r">
          <span class="font-good-time">{{companyCount}}</span>个
        </div>
      </div>
      <div class="text">
        <div class="l">分路总数</div>
        <div class="r font-good-time">
          <span class="font-good-time">{{deviceTotal}}</span>路
        </div>
      </div>
      <div class="text">
        <div class="l">今日异常事件</div>
        <div class="r">
          <span class="font-good-time">{{errorNumber}}</span>起
        </div>
      </div>
    </div>
    <div class="shishi-bottom-chart bordered">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <div class="chart-header">
        <h1>实时功率TOP3</h1>
      </div>
      <div class="chart-body">
        <div class="w1 h1" ref="gonglv-ref"></div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapState } from "vuex"
export default {
  mounted() {
    this.initState()
  },
  beforeDestroy() {
    window.addEventListener("resize", () => false)
  },
  computed: {
    ...mapState({
      topList: state => state.cityInfo.topList,
      companyCount: state => state.cityInfo.companySize,
      deviceTotal: state => state.cityInfo.deviceTotal,
      errorNumber: state => state.cityInfo.errorNumber
    })
  },
  watch: {
    topList: {
      deep: true,
      handler() {
        this.initState()
      }
    }
  },
  data() {
    return {
      mapBottle: null
    }
  },
  methods: {
    initState() {
      let colorLists = ["rgb(255,104,3)", "rgb(84,254,251)", "rgb(10,240,118)"]
      this.$nextTick(() => {
        if (!!this.mapBottle) this.mapBottle.clear()
        const dom = this.$refs["gonglv-ref"]
        this.mapBottle = this.echarts.init(dom)
        let options = {
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          legend: {
            show: false
            // orient: "vertical",
            // x: "1",
            // y: "bottom",
            // textStyle: {
            //   color: "#fff"
            // }
          },
          series: [
            {
              name: "实时功率",
              type: "pie",
              radius: [40, 60],
              center: ["50%", "40%"],
              data: []
            }
          ]
        }
        let data = null
        try {
          data = this.topList.map((item, i) => {
            return {
              value: item.value,
              name: `功率Top${i + 1}`,
              itemStyle: {
                color: colorLists[i]
              },
              tooltip: {
                formatter: params => {
                  return `<span>${params.marker} ${params.name}<br/>
                  </span>企业名称：<span>${
                    this.topList[params.dataIndex].companyName
                  }</span><br/>
                  <span>设备名称：${item.deviceName}</span><br/>
                  <span>功率：${params.value}kW</span>`
                }
              }
            }
          })
          options.series[0].data = data
          options.series[0].name = this.topList[0].companyName

          this.mapBottle.setOption(options)
          window.addEventListener("resize", () => {
            this.mapBottle.resize()
          })
        } catch (e) {}
      })
    }
  }
}
</script>
